<template>
    <div class="wrap">
       <common-head :title="title"  />
         <!-- 轮播图 -->
       <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="banner in pics" :key='banner.id'>
              <img :src="banner.pic" alt="">
          </van-swipe-item>
</van-swipe>
 <!-- 轮播图 -->
  <div class="item info">
            <h5>{{basicInfo.name}}</h5>
            <p>￥{{basicInfo.minPrice}}</p>
          </div>
          <div v-html="content" class="content"></div>

       <van-goods-action>
      <van-goods-action-icon @click="$router.push('/home')" icon="home-o" text="首页" />
      <van-goods-action-icon :badge="$store.state.cart.items.length" @click="$router.push('/cart')" icon="cart-o" text="购物车" />
      <van-goods-action-button @click="showzhao(0)"  color="#303030" type="warning" text="加入购物车" />
      <van-goods-action-button @click="showzhao(1)" color="#FF734C" type="danger" text="立即购买" />
    </van-goods-action>

    <!-- 弹出层 -->
    <van-popup class="van-popup" v-model="show" position="bottom" round :style="{ height: '40%' }" >
      <van-card
        :num="sku.number"
        :price="sku.minPrice"
        :title="sku.name"
        :thumb="sku.pic" >
  <template #footer>
    <van-stepper v-model="sku.number" />
  </template>

   </van-card>
  <van-button @click="confirmItem" class="top" size="large" round color="#FF734C">确定</van-button>
</van-popup>
    </div>
</template>

<script>
import commonHead from '_components/commonHead'
import { fetchDetail, addCart } from '_api'
import { getToken } from '_utils'
import { Toast } from 'vant'
export default {
   name:'detail',
  data () {
    return {
      title: 'sangpin',
      basicInfo: {},
      content: '',
      pics: [],
      // 商品规格
      sku: {
        number: 1
      },
      show: false,
      action: 0
    }
  },
  created () {
    this.fetchItemsDetail()
  },
  methods: {
    confirmItem () {
      this.show = false
      if (this.action === 0) {
        addCart({
          goodsId: this.sku.id,
          number: this.sku.number,
          token: getToken()
        }).then(res => {
          if (res.data.code === 0) {
            this.$store.commit('cart/set_items', res.data.data.items)
            Toast({
              type: 'success',
              message: '加入成功',
              onClose: () => {
                this.show = false
              }
            })
          }
        })
      } else {
        alert('提交订单页')
      }
    },
    showzhao (n) {
      this.show = true
      this.action = n
    },
    fetchItemsDetail () {
      fetchDetail(
        { id: this.$route.params.id }
      ).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.pics = res.data.data.pics
          this.content = res.data.data.content
          this.title = this.basicInfo.name
          this.sku = {
            ...this.basicInfo,
            ...this.sku
          }
        }
      })
    }
  },
  components: {
    commonHead
  }
}
</script>

<style lang="scss" scoped>
   .my-swipe{
     img{
       width: 100%;
     }
   }
   /deep/.content{
     img{
 width: 100%;
     display: block;
     }
   }
    .wrap{
     margin-bottom: 50px;
   }
  .van-popup{
    padding: 10px 0;
  }
  .top{
    margin-top: 20px;
  }
  .info{
    font-size: 17px;
    p{
  color: #ff4437;
  font-size: 20px;
    }
  
  }
  .content{
    font-size: 15px;
  }
</style>
